<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';

// 定义 props 类型
const props = defineProps({
  position: {
    type: [String, Object], // 允许接收字符串或对象
    default: '',
  },
});

// 解析坐标字符串为数组
const parsePositions = (positionStr: string | object) => {
  try {
    // 类型检查和转换
    let formattedStr = '';

    if (typeof positionStr === 'string') {
      formattedStr = positionStr;
    } else if (typeof positionStr === 'object' && positionStr !== null) {
      console.warn('位置参数应为字符串格式，尝试转换对象...');
      formattedStr = JSON.stringify(positionStr);
    } else {
      console.error('位置参数类型无效');
    }

    if (!formattedStr.trim()) return [];

    // 解析逻辑保持不变...
    return formattedStr
      .split('],[')
      .map((v: any) => {
        const cleaned = v
          .replace(/[\[\]]/g, '')
          .split(',')
          .map(Number);
        return cleaned.length === 2 && cleaned.every((num: any) => !isNaN(num)) ? cleaned : null;
      })
      .filter(Boolean);
  } catch (error) {
    console.error('坐标解析失败:', error);
    return [];
  }
};

const map = ref<any>(null); // 使用 any 类型避免类型检查错误
const script = ref<HTMLScriptElement | null>(null); // 显式声明 script 类型

// 初始化地图
const initMap = async () => {
  script.value = document.createElement('script');
  script.value.src = `https://webapi.amap.com/maps?v=2.0&key=9de77976f7694228b13c455472c3c5f2`;
  script.value.async = true;

  // 加载脚本并初始化地图
  script.value.onload = async () => {
    await nextTick(); // 确保 DOM 渲染完毕
    if (window.AMap && !map.value) {
      // 确保 AMap 已加载并初始化 map
      map.value = new window.AMap.Map('map', {
        center: [116.397428, 39.90923],
        zoom: 3,
      });
      addMarkers(); // 加载标记
    }
  };

  document.head.appendChild(script.value);
};

// 添加标记
const addMarkers = () => {
  if (!map.value) {
    console.warn('地图尚未初始化');
    return;
  }

  // 判断 props.position 是否有值
  if (props.position) {
    const positions = parsePositions(props.position);

    // 仅在有有效坐标时创建标记
    if (positions.length > 0) {
      positions.forEach((position) => {
        const marker = new window.AMap.Marker({
          position: position, // 标记的坐标
        });

        // 添加标记到地图
        marker.setMap(map.value);
      });
    } else {
      console.warn('没有有效的坐标可添加标记');
    }
  } else {
    console.warn('没有可用的坐标');
  }
};

onMounted(() => {
  initMap();
  document.title = '农业外来入侵物种防控与管理平台';
});

// 监听 props.position 的变化
watch(
  () => props.position,
  (newVal) => {
    if (newVal && map.value) {
      addMarkers(); // 位置有变化时添加标记
    }
  }
);

// 清理脚本元素和其他资源
onBeforeUnmount(() => {
  if (script.value) {
    document.head.removeChild(script.value);
    script.value = null;
  }
  if (map.value) {
    map.value.destroy(); // 销毁地图实例，清理资源
    map.value = null;
  }
});
</script>

<template>
  <div id="map" class="map-container"></div>
</template>

<style scoped>
.map-container {
  width: 100%;
  height: 500px; /* 根据需要调整高度 */
}
</style>
